<template>
	<view>
		<scroll-view :scroll-x="true">
			<view class="scroll">
				<view class="scroll-item" v-for="(item, index) in list" :key="index">
					<image :src="item.image" mode="widthFix"></image>
					<view class="title">{{item.title}}</view>
					<view class="price">{{item.price}}</view>
					<view class="time">
						{{ diffTime(item.endTime) }}
					</view>
				</view>
			</view>
		</scroll-view>
		<unicloud-db collection="list" v-slot:default="{ data, loading }">
			<view class="list">
				<view class="list-item" v-for="(item, index) in data" :key="index" @click="toDetail(item)">
					<image :src="item.image" mode=""></image>
					<view class="right">
						<view class="title">{{item.title}}</view>
						<view class="desc">{{item.desc}}</view>
						<view class="price">{{item.price}}</view>
					</view>
				</view>
			</view>
			<view class="loading" v-show="loading">数据加载中...</view>
		</unicloud-db>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				a: 1,
				list: [{
						image: 'https://robohash.org/112323?set=set5',
						title: '哈哈哈',
						price: '100.12',
						id: 'zsdaweqw',
						endTime: '2023/11/30 00:00:00'
					},
					{
						image: 'https://robohash.org/12323?set=set5',
						title: '哈哈哈',
						price: '100.12',
						id: 'zsdaweqw',
						endTime: '2023/12/01 00:00:00'
					}, {
						image: 'https://robohash.org/15323?set=set5',
						title: '哈哈哈',
						price: '100.12',
						id: 'zsdaweqw',
						endTime: '2023/12/03 00:00:00'
					},
					{
						image: 'https://robohash.org/112323?set=set5',
						title: '哈哈哈',
						price: '100.12',
						id: 'zsdaweqw',
						endTime: '2023/11/30 00:00:00'
					},
					{
						image: 'https://robohash.org/12323?set=set5',
						title: '哈哈哈',
						price: '100.12',
						id: 'zsdaweqw',
						endTime: '2023/12/01 00:00:00'
					}, {
						image: 'https://robohash.org/15323?set=set5',
						title: '哈哈哈',
						price: '100.12',
						id: 'zsdaweqw',
						endTime: '2023/12/03 00:00:00'
					}
				]
			}
		},
		methods: {
			startCurtDownTime() {
				this.timer = setInterval(() => {
					this.list = [...this.list]
				}, 1000)
			},
			toDetail(item) {
				uni.navigateTo({
					url: '/pages/detail/detail?id=' + item._id
				})
			},
			diffTime(endTime, startTime = new Date()) {
				const time = new Date(endTime).getTime() - new Date(startTime).getTime();

				const seconds = Math.floor((time / 1000 % 60)).toString().padStart(2, 0)
				const minites = Math.floor((time / 1000 / 60 % 60)).toString().padStart(2, 0)
				const hours = Math.floor((time / 1000 / 60 / 60)).toString().padStart(2, 0)

				// console.log(`${hours}:${minites}:${seconds}`)
				return `${hours}:${minites}:${seconds}`
			},
			
		},
		onLoad() {
			this.startCurtDownTime()
		}
	}
</script>

<style lang="scss" scoped>
	.list-item {
		display: flex;

		image {
			width: 300rpx;
			height: 240rpx;
			flex-shrink: 0;

		}

		.right {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
		}
	}

	.scroll {
		display: flex;
		flex-wrap: nowrap;

		.scroll-item {
			width: 33vw;
			flex-shrink: 0;
			position: relative;

			image {
				width: 100%;
			}

			.time {
				position: absolute;
				top: 0%;
				background-color: #111;
				color: white;
				left: 50%;
				transform: translateX(-50%);
			}
		}
	}
</style>